<template>
  <div class="trend_month">
    <div id="trendMonthChar"
         style="width:100%;height:100%"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
// import ECharts from 'vue-echarts'
export default {
  components: {
    // ECharts
  },
  props: {
    xData: {
      type: Array,
      default: Array
    },
    modelData: {
      type: Array,
      default: Array
    },
    newDate: {
      type: Date,
      default: Date
    }
  },
  data() {
    return {
      char: null
    }
  },
  watch: {
    newDate(e) {
      this.chart.resize()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.chart = echarts.init(document.getElementById('trendMonthChar'))
      const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']// this.xData//
      const serierData = [22, 18, 10, 15, 3, 15, 17, 5, 23, 35, 19, 25]// this.modelData //
      const option = {
        color: ['#63caff', '#3608FE'],
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 0,
          top: 40
        },
        xAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: 14,
            interval: 0,
            rotate: 40
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#384267',
              width: 1,
              type: 'dashed'
            },
            show: true
          },
          data: xData,
          type: 'category'
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: 14
          },

          splitLine: {
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#384267',
              width: 1,
              type: 'dashed'
            },
            show: true
          },
          name: ''
        },
        series: [{
          data: serierData,
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: 'linear',
              global: false,
              colorStops: [{
                offset: 0,
                color: '#3A1BFD'
              }, {
                offset: 1,
                color: '#3BEFFD'
              }]
            }
          },
          label: {
            show: true,
            position: 'top',
            distance: 10,
            color: '#fff'
          }
        },
        {
          // data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          type: 'pictorialBar',
          barMaxWidth: '14',
          symbol: 'diamond',
          symbolOffset: [0, '50%'],
          symbolSize: [15, 10]
        },
        {
          data: serierData,
          type: 'pictorialBar',
          barMaxWidth: '20',
          symbolPosition: 'end',
          symbol: 'diamond',
          symbolOffset: [0, '-50%'],
          symbolSize: [15, 8],
          zlevel: 2
        }
        ],
        tooltip: {
          trigger: 'item',
          show: true
        }
      }
      this.chart.setOption(option, true)
    }
  }
}
</script>
<style lang="scss" scoped>
.trend_month {
  width: 100%;
  height: 100%;
}
</style>
